Section nav into the top bar + a design pass on the Roster - #270

…h the design system

## Section nav moves into the top bar

The left rail is gone. Board / Roster are now icon buttons on the left of the
workspace tab bar, using the *identical* recipe to the cluster on the right
(h-8 w-8, motion scale 1.05/0.95, 20x20 solid icon, `bg-accent/15 text-accent`
when active) so the header reads as one row of controls instead of two systems.
Frees the ~48px column the rail was taking, and drops a level of nesting from
the app shell.

## Design pass — conformance, not novelty

This codebase already has a mature token system, so the job was matching it.
Auditing my own roster code against it turned up real drift, all of it mine:

- **Invented type sizes.** `text-[10.5px]` and `text-[9.5px]` appeared ONLY in
  roster files; `text-[13px]` in one other place in the whole app. Normalized
  to the house scale (text-[10px] / text-[11px] / text-xs / text-sm).
- **Invented colours.** The runtime chips used raw `text-[#56c2d6]` /
  `bg-[#b58cff]` in a codebase that uses semantic tokens everywhere (with one
  documented exception). Colour-coding the runtime was decoration anyway: the
  portrait already distinguishes agents and the toolbar already filters, so the
  runtime is now stated in words only.
- **Non-standard controls.** Inputs, labels, primary/secondary buttons and modal
  chrome now match `script-editor.tsx` exactly — header with an X, scrollable
  body, footer. The two editors in this app are the same object again.
- Focus rings added where they were missing.

## Fixed by actually looking at it

Three problems only visible on screen, found by driving the app in Chrome:

- The section header stopped at the grid column, leaving the dossier's content
  floating with nothing to align to. It now spans both columns.
- The dossier's label gutter was `w-24` for labels that are ~46px wide, leaving
  a visible dead channel between each label and its value. Now `w-16`.
- **Below `lg` the dossier was `hidden`, so on a narrow window selecting an
  agent did nothing at all.** It now stacks under the grid instead of
  disappearing, with the portrait capped so it doesn't stretch full-bleed.

## Consistency beyond my own code

Discord, Runtime and Debug were the only settings nav rows without a glyph,
which made the sidebar read as two half-finished lists. Added, same 20x20 solid
shape as their siblings.

Extracted `ConfirmDialog` — I had hand-rolled the same delete confirmation
twice. (Note `shared/dialog.tsx` exists but is used by nothing; the real house
pattern is the overlay, so this follows that.)

Cut copy that repeated itself: the dossier stated the runtime three times on one
screen, and the Skills tab's intro repeated its own nav hint verbatim.

Verified: tsc, eslint, IPC check 209, vitest 429, production build clean, and
walked through board / roster / both dossier shapes / editor / skills at 1440px
and 900px in a real browser.